<script setup lang="ts">
import { Plus, Minus } from '@element-plus/icons-vue';
import {ref,inject} from 'vue'
import type { VueTypeCom } from '@/types'
import { EditorType, EditorTypeText } from '../../constants'

const props = defineProps<{
  id: string;
  isShow: boolean;
  name: string;
  editCom: VueTypeCom;
  configKey: EditorType;
  status: string[];
}>()
const updateStatus = inject('updateStatus')

const optionArr = ref(props.status);

const addOptionHandle = ()=>{
  const lastOption  = optionArr.value[optionArr.value.length - 1]
  let num = 1;
  // 如果最后一个选项存在数字，则提取该数字并加1
  if (lastOption) {
    const match = lastOption.match(/\d+/);
    if (match && !isNaN(+match[0])) {
      num = +match[0] + 1;
    }
  }

  const addStatus = '新增选项' + num;
  updateStatus(props.configKey,addStatus)

}

const removeOption = (index: number)=>{
  updateStatus(props.configKey,index)

}
</script>

<template>
  <div class="options-editor">
    <div class="option-header flex align-items-center">
      <span>{{EditorTypeText[configKey]}}</span>
      <el-button size="small" circle :icon="Plus" @click="addOptionHandle" />
    </div>
    <div class="option-item flex align-items-center" v-for="(item, index) in optionArr" :key="index">
      <el-input placeholder="选项" v-model="optionArr[index]"></el-input>
      <el-button
        type="danger"
        class="ml-10"
        size="small"
        :icon="Minus"
        circle
        @click="removeOption(index)"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.option-item{
  margin: 10px 0;
}

.option-header{
  span{
    margin-right: 5px;
  }
}
</style>
